<template>
    <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            list: [],
        };
    },
    methods: {
        getecharts() {
            this.axios.get('getecharts')
                .then(res => {
                    this.list = res.data.data
                    this.openions();
                })

        },
        openions() {
            var chartDom = document.getElementById("main");
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: "用户注册表",
                    subtext: "Fake Data",
                    left: "center",
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                },
                series: [
                    {
                        name: "Access From",
                        type: "pie",
                        radius: "50%",
                        data: this.list,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };

            option && myChart.setOption(option);
        },
    },
    mounted() {
        this.getecharts()
    },
};
</script>

<style></style>